<template>
  <canvas id="qrcode" :style="{width: `${props.size}px`,height: `${props.size}px`}"></canvas>
</template>

<script setup name="x-qrcode">
import UQRCode from 'uqrcodejs';
import {onMounted, getCurrentInstance, watch} from "vue";
import {Helper} from "core";

const props = defineProps({
  size: {
    type: Number,
    default: 300
  },
  data: {
    type: String,
    default: "",
  }
})

const gen = (value) => {
  // 获取uQRCode实例
  var qr = new UQRCode();
// 设置二维码内容
  qr.data = value;
// 设置二维码大小，必须与canvas设置的宽高一致
  qr.size = props.size;
// 调用制作二维码方法
  qr.make();
// 获取canvas元素
  var canvasContext =  uni.createCanvasContext('qrcode', getCurrentInstance());
// 设置uQRCode实例的canvas上下文
  qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
  qr.drawCanvas();
}

watch(() => props.data, (value) => {
  if(Helper.empty(value)) {
    return;
  }

  gen(value)
})

</script>

<style scoped lang="less">

</style>
